<!-- Update menu with colors layers really displayed in viewer -->
<!DOCTYPE html>
<html>
    <head>
        <title>Itowns - Color layers Visible</title>
        <style type="text/css">
            html {height: 100%}
            body { margin: 0; overflow:hidden; height:100%}

            #viewerDiv {
                margin : auto auto;
                width: 100%;
                height: 100%;
                padding: 0;
            }
            #menuDiv {position: absolute; top:0px; margin-left: 0px;}
            @media (max-width: 600px) {
                #menuDiv {
                    display: none;
                }
            }
        </style>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="./GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script type="text/javascript">
            /* global itowns,document,GuiTools*/

            var positionOnGlobe = { longitude: 2.351323, latitude: 48.856712, altitude: 25000000 };

            // iTowns namespace defined here
            var viewerDiv = document.getElementById('viewerDiv');
            var menuGlobe = new GuiTools('menuDiv');
            var globeView = new itowns.GlobeView(viewerDiv, positionOnGlobe);
            menuGlobe.view = globeView;

            function addLayerCb(layer) {
                return globeView.addLayer(layer);
            }

            var promises = [];
            promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(addLayerCb));
            promises.push(itowns.Fetcher.json('./layers/JSONLayers/Region.json').then(addLayerCb));
            promises.push(itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT.json').then(addLayerCb));

            function removeDups(a) {
                var temp = {};
                for (var i = 0; i < a.length; i++) {
                    temp[a[i]] = true;
                }
                var result = [];
                for (var val in temp) {
                    result.push(val);
                }
                return result;
            }

            function getLayersColorVisible(node, layers) {
                if (!node || !node.visible) {
                    return;
                }
                if (node.level) {
                    // if node.material.visible is true then the node is diplayed in viewer
                    // if node.material.colorLayersId is defined then the node have color layers
                    if (node.material.visible && node.material.colorLayersId) {
                        // get all node's color layers
                        var tileColorLayers = node.material.colorLayersId;
                        layers.id = removeDups(layers.id.concat(tileColorLayers));
                    }
                }
                if (node.children) {
                    for (var child of node.children) {
                        getLayersColorVisible(child, layers);
                    }
                }
            }

            globeView.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                // eslint-disable-next-line no-console
                console.info('Globe initialized');
                Promise.all(promises).then(function () {
                    menuGlobe.addImageryLayersGUI(globeView.getLayers(function(l) { return l.type === 'color'; }));
                    menuGlobe.addElevationLayersGUI(globeView.getLayers(function (l) { return l.type === 'elevation'; }));
                });
            });

            // Use frame requester to update menu before rendering
            globeView.addFrameRequester(itowns.MAIN_LOOP_EVENTS.BEFORE_RENDER, function () {
                var layers = { id: [] };
                // globeView.scene is THREE.js scene
                getLayersColorVisible(globeView.scene, layers);
                var colorLayers = globeView.getLayers(function (l) { return l.type == 'color'; });

                colorLayers.forEach(function (layer) {
                    menuGlobe.hideFolder(layer.id, layers.id.indexOf(layer.id) == -1)
                });
            });
        </script>
    </body>
</html>
